<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素浮动后的特点</title>
    <style>
        div {
            padding: 20px;
        }
        .outer {
            width: 800px;
            height: 400px;
            background-color: grey;
        }
        .inner1 {
            background-color: skyblue;
        }
        /* 浮动会脱离文档流 */
        /* 不管是什么元素 浮动之后默认由内容撑开大小  可以调整宽高 */
        /* 浮动之后 不会独占一行 会和其它元素同行 */
        /* 浮动之后 不会出现margin塌陷问题和合并问题 可以完美设置四个方向的外边距 */
        /* 不会像行内块元素一样被当作文本处理 */
        .inner2 {
            margin-left: 10px;
            margin-right: 20px;
            float: left;
            width: 200px;
            height: 200px;
            background-color: lime;
        }
        .inner3 {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner1">内容一</div>
        <div class="inner2">内容二</div>
        <div class="inner3">内容三</div>
    </div>
</body>
</html>